<template>
  <div class="erpmorder-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button :icon="Search" plain type="primary" @click="openQueryDialog">
          查询
        </el-button>
        <el-button
          :disabled="!selectedData || selectedData.length == 0"
          :icon="CircleCheck"
          plain
          type="danger"
          @click="sync"
        >
          同步
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '2px 0px' }"
      :data="u8Morders"
      highlight-current-row
      show-summary
      size="small"
      style="height: calc(100vh - 186px)"
      :summary-method="getSummaries"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="index" width="50" />
      <el-table-column
        align="center"
        :selectable="selectable"
        type="selection"
        width="45"
      />
      <el-table-column label="U8订单号" prop="moCode" width="150" />
      <el-table-column label="u8行号" prop="sortSeq" width="90" />
      <el-table-column label="编码名称" prop="invcode">
        <template #default="scope">
          <el-row>
            <span>{{ scope.row.invcode }}</span>
          </el-row>
          <el-row>
            <span style="font-size: 15px; font-weight: 700; color: #000">
              {{ scope.row.cInvName }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="invspec" width="250">
        <template #default="scope">
          <el-row>
            <span style="font-size: 15px; font-weight: 700; color: #000">
              {{ scope.row.cInvStd }}
            </span>
          </el-row>
          <el-row>
            <span>
              {{ scope.row.cInvAddCode }}
            </span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="生产部门"
        prop="cDepName"
        style="font-size: 14px; font-weight: 600; color: #000"
        width="150"
      >
        <template #default="scope">
          <span style="font-size: 14px; font-weight: 600; color: #000">
            {{ scope.row.cDepName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="订单数量" prop="jhwgsl" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.qty }}&nbsp;{{ scope.row.measName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="同步" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.mesModid === -100" color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
          <el-icon v-else color="#30DF80" size="20">
            <Select />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="仓库" prop="cWhName" width="150" />
      <el-table-column label="开始时间" prop="startDate" width="220" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <queryDialog ref="queryDialogRef" @success-callback="queryCallback" />
  </div>
</template>

<script setup>
  import {
    Search,
    CircleCheck,
    Select,
    SemiSelect,
  } from '@element-plus/icons-vue'
  import { queryMomOrderApi, syncMomOrderU8ListApi } from '@/api/erp/index'
  import { localStorageConfig } from '@/config/localstorage.config'
  import queryDialog from './modules/queryDialog.vue'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 15,
    total: 0,
  })

  const u8Morders = ref()
  const queryForm = ref({ pkCorp: pkCorp })
  const queryDialogRef = ref()
  const currentXz = ref()
  const selectedData = ref()

  const getDate = async () => {
    let params = {
      ...paginationParams,
      ...queryForm.value,
    }
    const load = $baseLoading()
    try {
      const res = await queryMomOrderApi(params)
      if (res.code === 2000) {
        $baseMessage(res.msg, 'success')
        u8Morders.value = res.data.list
        paginationParams.total = res.data.total
      } else {
        $baseMessage(res.msg, 'error')
      }
    } finally {
      load.close()
    }
  }
  const selectable = (row) => {
    if (row.mesModid != -100) {
      return false
    } else {
      return true
    }
  }

  const handleCurrentChange = (rowData) => (currentXz.value = rowData)

  const openQueryDialog = () => queryDialogRef.value.openDialog()

  const queryCallback = (value) => {
    queryForm.value = value
    queryForm.value.ksDate = value.queryDate[0]
    queryForm.value.jsDate = value.queryDate[1]
    getDate()
  }

  const handleSelectionChange = (vals) => {
    selectedData.value = vals
  }

  const sync = async () => {
    const sendData = selectedData.value.map((item) => {
      item.pkCorp = pkCorp
      if (item.mesModid == -100) {
        return item
      }
    })
    if (sendData.length > 0) {
      const load = $baseLoading()
      try {
        const res = await syncMomOrderU8ListApi(sendData)
        if (res.code === 2000) {
          $baseMessage(res.msg, 'success')
          getDate()
        } else {
          $baseMessage(res.msg, 'error')
        }
      } finally {
        load.close()
      }
    } else {
      $baseMessage('请选择需要同步的订单！', 'warning')
    }
  }

  // const sync = async () => {
  //   if (currentXz.value.mesModid != -100) {
  //     $baseMessage('该生产订单已经同步过了', 'warning')
  //     return
  //   }
  //   const load = $baseLoading()
  //   try {
  //     currentXz.value.pkCorp = pkCorp
  //     const res = await syncMomOrderApi(currentXz.value)
  //     if (res.code === 2000) {
  //       $baseMessage(res.msg, 'success')
  //       getDate()
  //     } else {
  //       $baseMessage(res.msg, 'error')
  //     }
  //   } finally {
  //     load.close()
  //   }
  // }

  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
  }
  //#endregion

  watch(paginationParams, () => getDate())

  onMounted(() => getDate())
</script>
